<template>
  <div class="login">
    <ul>
      <li>
        <label ref="pengge">绑定手机号</label>
        <input type="number" placeholder='请输入手机号' oninput="if(value.length>11)value = value.slice(0,11)" @focus="input_focus()" v-model="phone">
      </li>
      <li>
        <label>校验码</label>
        <input class="input_imgCode" placeholder='请输入校证码' oninput="if(value.length>5)value=value.slice(0,5)" @focus="input_focus()" v-model="input_imgCode">
        <div class='imgCode'>
          <img src="http://test2.dalinggong.com/sys/vcode" alt=""><br/><span>换一换</span>
        </div>
      </li>
      <li>
        <label>手机验证码</label>
        <input type="number" placeholder='请输入验证码' oninput="if(value.length>4)value = value.slice(0,4)" @focus="input_focus()" v-model="phoneCode">
        <button class="getCode" @click="getCode" ref="getCode_disab">{{ getCode_msg }}</button>
      </li>
    </ul>
    <p id="errorHint" :style="errorHint">
      <i class="iconfont icon-warning"></i>
      <span id="errorHint_text">{{errorHint_text}}</span>
    </p>
    <div @click="login_submit" class="submit_btn" :class="{'button':btn,'login_btn':login_btn}">
      <button>绑 定</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      phone:'',
      input_imgCode:'',
      phoneCode:'',
      getCode_msg:'发送验证码',
      errorHint_text:'输入手机号有误，请重新输入',
      errorHint:{display:'none'},
      btn:true,
      login_btn:true
    }
  },
  mounted(){},
  methods:{
    getCode(){
        this.form_if();
        var getCode_disab = this.$refs.getCode_disab;
        if(this.errorHint.display == "none"){
          if(this.input_imgCode == ""){
            this.errorHint.display = 'block';
            this.errorHint_text = "请输入校验码";
            return false;
          }else{
            this.errorHint.display = 'none';
            this.timer(60,getCode_disab);
          }
        }
    },
    login_submit(){
        this.form_if();
        if(this.errorHint.display == "none"){
            if(this.input_imgCode == ""){
              this.errorHint.display = 'block';
              this.errorHint_text = "请输入校验码";
              return false;
            }else{
              this.errorHint.display = 'none';
            }
            if(this.phoneCode == ""){
              this.errorHint.display = 'block';
              this.errorHint_text = "请获取验证码";
              return false;
            }else{
              this.errorHint.display = 'none';
              this.$router.push({path:'/OrderGoods'})//跳转页面
            }
        }
    },
    input_focus(){
      this.errorHint.display = 'none';
    },
    timer(time,disab){
      var self=this;
      console.log(disab)
      var timer = setInterval(function () {
        time--;
        self.getCode_msg = time+"s后重发";
        disab.setAttribute('disabled',true);
        if (time == 0) {
          clearInterval(timer);
          self.getCode_msg = "重新发送";
          disab.setAttribute('disabled',false);
        }
      }, 1000);
    },
    form_if(){
      var phoneReg = /^1[34578]\d{9}$/;
      if(this.phone == ""){
        this.errorHint.display = 'block';
        this.errorHint_text = "请输入手机号";//phone.parentNode.className = 'active';
        return false;
      }else{
        this.errorHint.display = 'none'
        if(!phoneReg.test(this.phone)){
          this.errorHint.display = 'block';
          this.errorHint_text = "请输入正确的手机号";
          return false;
        }else{
          this.errorHint.display = 'none';
        }
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login{background: #F7F7F7;}
  .button button{padding:2% 5%;color:#fff;background:#ffaf23;border-radius: 25px;font-size: .8rem;}
  .login_btn button{width:80%;font-size: 1.1rem;padding:3% 10%;margin: 20% 0 0 10%;}
  .login li{border-bottom:1px solid #f2f2f2;background: #fff;padding:1.2rem 1rem;position:relative;}
  .login li label{border-right:1px solid #f2f2f2;font-size: 1rem;width:29%;display: inline-block;}
  .login li input{font-size: 1rem;}
  .input_imgCode{width:35%;}
  .imgCode {width:25%;position:absolute;top:.5rem;right:1rem;}
  .imgCode img{width:100%;height:38px;}
  .imgCode span{font-size: .8rem;}
  .getCode{background: none;border:1px solid #f2f2f2;border-radius: 3px;width:27.5%;padding: .5rem 0;position: absolute;top:.5rem;right:1rem;}
  #errorHint{color:#ffaf23;font-size: .9rem;padding:.5rem 0 0 1rem;}
  #errorHint i{font-size: 1.2rem;vertical-align: middle;}
  .login .active{border:1px solid red;}
  .button button{padding:2% 5%;color:#fff;background:#ffaf23;border-radius: 25px;font-size: .8rem;}
  .login_btn button{width:80%;font-size: 1.1rem;padding:3% 10%;margin: 20% 0 0 10%;}
</style>
